import React, { Component } from "react"
import { Menu, Layout, Tag, Breadcrumb } from 'antd';
import {
    PieChartOutlined,
    MailOutlined,
} from '@ant-design/icons';
import { Link } from "react-router-dom";
import { connect } from "react-redux"
import axios from "_axios@0.21.4@axios";

const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;

class Home extends Component {
    state = {
        collapsed: false,
        Breadcrumb: [],
        bread: [],
        pathList: [],
        authName: ""

    };
    componentDidMount() {
        let breakList = JSON.parse(sessionStorage.getItem('breakList')) || [];
        let bread = JSON.parse(sessionStorage.getItem('bread')) || [];
        let authName = window.sessionStorage.getItem('authName')
        this.setState({
            Breadcrumb: breakList,
            bread,
            authName

        })
        this.getPath()
    }
    getPath() {
        axios.get(`/path?username=${window.sessionStorage.getItem('auth')}`).then(res => {

            this.setState({
                pathList: res.data[1][0].children
            })
            console.log(this.state.pathList)
        })
    }
    toggleCollapsed = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    }
    selectSub = (e) => {
        let tar = e.target

        if (tar.className === 'ant-menu-title-content') {
            let list = sessionStorage.getItem("break") || []
            let inner = tar.parentNode.parentNode.parentNode.previousElementSibling.children[1] ?
                tar.parentNode.parentNode.parentNode.previousElementSibling.children[1].innerHTML : ""
            list.push(inner)
            list.push(e.target.innerHTML)
            this.setState({
                bread: list
            })
        } else if (tar.nodeName === "A") {
            if (tar.innerHTML !== "工作台") {
                let bread = sessionStorage.getItem("break") || []
                let grandPa = tar.parentNode.parentNode.parentNode.parentNode.parentNode.previousElementSibling.children[1] ? tar.parentNode.parentNode.parentNode.parentNode.parentNode.previousElementSibling.children[1].innerHTML : ""
                let parent = tar.parentNode.parentNode.parentNode.previousElementSibling.children[1].innerHTML ? tar.parentNode.parentNode.parentNode.previousElementSibling.children[1].innerHTML : tar.parentNode.parentNode.parentNode.previousElementSibling.children[0].innerHTML
                let self = tar.innerHTML
                if (grandPa) {
                    bread.push(grandPa)
                    bread.push(parent)
                    bread.push(self)
                    this.setState({
                        bread
                    }, () => {
                        sessionStorage.setItem("bread", JSON.stringify(this.state.bread))
                    })
                } else {
                    bread.push(parent)
                    bread.push(self)


                    this.setState({
                        bread
                    }, () => {
                        sessionStorage.setItem("bread", JSON.stringify(this.state.bread))
                    })
                }
            } else {
                let list = []
                list.push(tar.innerHTML)
                this.setState({
                    bread: list
                }, () => {
                    sessionStorage.setItem("bread", JSON.stringify(this.state.bread))
                })
            }

            let url = tar.getAttribute('href')
            let title = tar.innerHTML
            let obj = {
                url,
                title
            }
            this.props.dispatch({
                type: "Breadcrumb",
                payload: obj

            })
            let breakList = JSON.parse(sessionStorage.getItem('breakList')) || [];

            let index = breakList.findIndex(item => item.url === url)

            if (index === -1) {
                if (breakList.length >= 5) {
                    breakList.splice(0, 1)
                }
                breakList.push({ ...obj })
            } else {
                breakList.splice(index, 1)
                breakList.push({ ...obj })
            }
            sessionStorage.setItem('breakList', JSON.stringify(breakList))
            this.setState({
                Breadcrumb: breakList
            })

        }

    }
    log(v) {

        let breakList = JSON.parse(sessionStorage.getItem('breakList')) || [];

        let index = breakList.findIndex(item => item.url === v.url)

        breakList.splice(index, 1)


        if (!breakList.length) {
            this.props.history.push('/home/welcome');
            window.location.reload()
            localStorage.clear()
            sessionStorage.clear()
        } else {
            if (index > 0) {
                this.props.history.push(breakList[index - 1].url)

            } else {
                window.location.reload()
                this.props.history.push(breakList[breakList.length - 1].url)

            }

        }
        sessionStorage.setItem('breakList', JSON.stringify(breakList))
        this.setState({
            Breadcrumb: breakList
        })
    }


    render() {
        return <div className="home">
            <Layout>
                <Header style={{ color: "white", background: "skyblue", fontSize: "25px" }}>电商后台管理系统</Header>
                <Layout>
                    <Sider collapsible={true} collapsed={this.state.collapsed} height="100%" onClick={this.selectSub}>
                        <p onClick={this.toggleCollapsed} className='auth'>
                            {this.state.authName}
                        </p>
                        <Menu
                            defaultSelectedKeys={['0']}
                            defaultOpenKeys={['1opp']}
                            mode="inline"
                            theme="dark"
                        >
                            {
                                this.state.pathList.map(item => item.title ? item.children ? <SubMenu key={item.path} icon={<MailOutlined />} title={item.title}>
                                    {
                                        item.children.map(item2 => item2.title ? item2.children ? <SubMenu key={item2.title} icon={<MailOutlined />} title={item2.title}>
                                            {
                                                item2.children.map(item3 => item3.title ? <Menu.Item key={item3.title} icon={<PieChartOutlined />}> <Link to={item3.path}>{item3.title}</Link></Menu.Item> : null)
                                            }
                                        </SubMenu> : <Menu.Item key={item2.title} icon={<PieChartOutlined />}> <Link to={item2.path}>{item2.title}</Link></Menu.Item> : null)
                                    }
                                </SubMenu> : <Menu.Item key={item.title} icon={<MailOutlined />} >
                                    <Link to={item.path}>{item.title}</Link>
                                </Menu.Item > : null)
                            }
                        </Menu>
                    </Sider>
                    <Content>
                        <div className="tagHeader">
                            <Breadcrumb>
                                <Breadcrumb.Item>首页</Breadcrumb.Item>
                                {
                                    this.state.bread ? this.state.bread.map((item, index) => <Breadcrumb.Item key={index}>{item}</Breadcrumb.Item>) : ''
                                }
                            </Breadcrumb>
                        </div>
                        <div className="routeTag">
                            <Tag color="magenta"><Link to="/home/welcome" >首页</Link></Tag>
                            {
                                this.state.Breadcrumb && this.state.Breadcrumb.map((item, index) => <Tag closable color="cyan" onClose={() => this.log(item)} key={index}><Link to={item.url}>{item.title}</Link></Tag>)
                            }
                        </div>
                        <div className="inner">
                            {
                                this.props.children
                            }
                        </div>
                    </Content>
                </Layout>
            </Layout>
        </div>
    }
}

export default connect()(Home)